@import '../basic/globalVar.scss';
@import '../mixins/index.scss';
$pane-col-width-3: #{(
    $--date-picker-em-width-default + $--date-picker-pane-margin * 2
  ) * 7 / 3 - $--date-picker-pane-margin * 2};
$pane-col-width-2: #{(
    $--date-picker-em-width-default + $--date-picker-pane-margin * 2
  ) * 7 / 2 - $--date-picker-pane-margin * 2};
$pane-min-width: #{(
    $--date-picker-em-width-default + $--date-picker-pane-margin * 2
  ) * 7};
$pane-time-col-height: #{$--date-picker-em-width-default - 4};

@include classNameConnect(date-picker) {
  display: inline-block;
  font-size: $--font-size-default;
  vertical-align: middle;
  @include el(reference) {
  }

  @include el(drop-down-inner) {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    border: $--border-default;
    border-radius: $--border-radius-default;
    box-shadow: $--box-shadow-default;
    background-color: $--color-white;
  }
}

@include classNameConnect(date-pane-item) {
  @include el(col) {
    color: $--color-text-default;
    cursor: pointer;
    transition: all $--animation-time;
    display: inline-block;
    text-align: center;
    margin: $--date-picker-pane-margin 0;
    padding: 0 $--date-picker-pane-margin;

    em {
      border: 1px solid transparent;
      display: block;
      font-style: normal;
      transition: all $--animation-time;
      border-radius: $--border-radius-default;
      width: $--date-picker-em-width-default;
      height: $--date-picker-em-width-default;
      line-height: $--date-picker-em-width-default;
    }

    @include el(hover, false, true) {
      em:hover {
        background-color: mix($--color-primary, $--color-white, 20%);
      }
    }
  }

  @include el((week, week-number)) {
    cursor: default;
    margin: $--date-picker-pane-margin 0;
    padding: 0 $--date-picker-pane-margin;

    em {
      cursor: default;
      width: $--date-picker-em-width-default;
      height: $--date-picker-em-width-default;
      line-height: $--date-picker-em-width-default;
    }
  }

  @include el(week-number) {
    em {
      color: $--date-picker-no-now-month-color;
    }
  }

  @include el(now) {
    em {
      color: $--color-primary;
    }
  }

  @include el(between) {
    background-color: mix($--color-primary, $--color-white, 20%);
  }

  @include el(selected) {
    em {
      border: 1px solid $--color-primary;
      background-color: $--color-primary;
      color: $--color-white;
    }
    @include el(no-now-month, false, true) {
      background-color: $--color-white;
      color: $--date-picker-no-now-month-color;
    }
  }

  @include el(disabled) {
    background-color: $--background-color-disabled;
    cursor: not-allowed;
    em {
      background-color: $--background-color-disabled;
      color: $--color-text-disabled;
      cursor: not-allowed;
      border-color: transparent;
    }
  }

  @include el(no-now-month) {
    color: $--date-picker-no-now-month-color;
  }
}

@include classNameConnect(date-pane-single) {
  @include el(header) {
    @include clear-float;
    overflow: hidden;
    text-align: center;
    border-bottom: $--border-default;
    font-size: #{$--font-size-default + 2px};
    height: #{$--date-picker-em-width-default + $--date-picker-pane-margin * 2};
    line-height: #{$--date-picker-em-width-default + $--date-picker-pane-margin *
      2};
    i {
      font-size: $--font-size-default;
    }
  }
  @include el(header-date-label) {
    cursor: pointer;
    &:hover {
      color: $--color-primary;
    }
  }
  @include el(header-pre) {
    float: left;
    padding-left: #{$--date-picker-pane-padding + $--date-picker-pane-margin};
    i {
      color: $--color-text-icon;
      cursor: pointer;
      margin-right: 5px;
      transition: color $--animation-time;

      &:hover {
        color: $--color-primary;
      }
    }
  }
  @include el(header-next) {
    float: right;
    padding-right: #{$--date-picker-pane-padding + $--date-picker-pane-margin};
    i {
      color: $--color-text-icon;
      cursor: pointer;
      margin-left: 5px;
      transition: color $--animation-time;

      &:hover {
        color: $--color-primary;
      }
    }
  }

  @include el(body) {
    padding: 10px;
    word-break: break-all;
  }
}

@include classNameConnect(date-pane) {
  display: flex;
  @include el(shortcuts) {
    background-color: $--background-color-base;
    width: 100px;
    border-right: $--border-default;
  }
  @include el(shortcuts-item) {
    padding: $--date-picker-pane-padding;
    cursor: pointer;
    @include utils-ellipsis;
    &:hover {
      background-color: $--background-color-hover;
    }
  }
  @include el(content) {
    display: flex;
  }
  @include el(footer) {
    border-top: $--border-default;
    padding: $--date-picker-pane-padding;
    text-align: right;
    @include clear-float;
  }
  @include el(footer-button) {
    margin-left: 5px;
  }
  @include el(footer-time) {
    float: left;
  }
}

@include classNameConnect(date-pane-date) {
  min-width: $pane-min-width;

  &__date-row-week {
    &:not(&-selected):hover {
      @include ci(date-pane-item) {
        &__col {
          background-color: mix($--color-primary, $--color-white, 20%);
        }
        &__week-number {
          background-color: transparent;
        }
        &__disabled {
          background-color: $--background-color-disabled;
        }
      }
    }
  }

  @include el(date-row-week-selected) {
    @include ci(date-pane-item) {
      &__col {
        background-color: mix($--color-primary, $--color-white, 20%);

        &:nth-last-of-typel(7) em,
        &:nth-last-of-typel(1) em {
          border: 1px solid $--color-primary;
          background-color: $--color-primary;
          color: $--color-white;
        }
      }
      &__week-number {
        background-color: transparent;
      }
      &__disabled {
        background-color: $--background-color-disabled;
      }
    }
  }

  @include b(show-week-number) {
    min-width: #{(
        $--date-picker-em-width-default + $--date-picker-pane-margin * 2
      ) * 8};
  }

  @include el(week, false) {
    text-align: right;
  }
}

@include classNameConnect(date-pane-year) {
  min-width: $pane-min-width;

  @include ci(date-pane-item) {
    &__col {
      margin: #{$--date-picker-pane-margin * 2} 0;
      padding: 0 #{$--date-picker-pane-margin * 2};

      em {
        width: #{$--date-picker-em-width-default * 7 / 3};
      }
    }
  }
}

@include classNameConnect(date-pane-month) {
  min-width: $pane-min-width;

  @include ci(date-pane-item) {
    &__col {
      margin: #{$--date-picker-pane-margin * 2} 0;
      padding: 0 #{$--date-picker-pane-margin * 2};

      em {
        width: #{$--date-picker-em-width-default * 7 / 3};
      }
    }
  }
}

@include classNameConnect(date-pane-time) {
  min-width: $pane-min-width;
  display: flex;
  @include el(hide) {
    visibility: hidden;
  }

  @include el((hh, mm, ss)) {
    height: #{($--date-picker-em-width-default - 4) * 9};
  }

  @include ci(date-pane-item__col) {
    display: block;
    margin: 0;
    padding: 0 $--date-picker-pane-margin;
    em {
      width: $pane-col-width-3;
      height: $pane-time-col-height;
      line-height: $pane-time-col-height;
    }
  }

  @include b(no-show-ss, false, true) {
    @include ci(date-pane-item__col) {
      em {
        width: $pane-col-width-2;
      }
    }
  }
}
